﻿<!doctype html>
<html>
<head>
<#include "/part_meta.ftl">
<title>店铺列表-迈小众</title>
<link href="${st.resDomain}/css/style.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/store.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/autostyle.css" rel="stylesheet" type="text/css">
<link href="${st.resDomain}/css/Classification.css" rel="stylesheet" type="text/css">
<style>
header .store .tab a { width: 33%;}
</style>
</head>

<body>
<!--头部-->
<header>
  <div class="boxw store">
    <div class="header">
      <span class="f_left"><a href="javascript:history.back();" class="back"></a></span>
      <span class="title">
        <#if searchWord?? && searchWord?length gt 0>
		   	搜店铺"<span style="display:inline;" id="searchWord">${searchWord}</span>"
		<#else>
			店铺列表
		</#if>
      </span>
      <span class="f_right"><a class="more"></a></span>
    </div>
    <div class="tab">
		<a id="rank_near" class="selected">附近</a>
    	<a id="rank_recom">推荐</a>
    	<a id="rank_hot">热门</a>
    </div>
    <div class="more">
      <a href="${st.domain}/search" class="icon-search">搜索</a>
      <a href="${st.domain}/category" class="icon-fl">类目</a>
      <a href="${st.userDomain}/shoppingCart" class="icon-car">购物车</a>
      <a href="${st.userDomain}/" class="icon-user">个人中心</a>
      <a href="${st.domain}/" class="icon-home">主页</a>
    </div>
  </div>
</header>
<!--头部 END-->

<div class="main boxw" id="store" style="padding-top:5rem;">
 <div id="storeList"></div>
 <div id="loadTip" class="listTip">点击加载更多</div>
</div>
<div id="storesItemTmp" style="display:none;">
	<div class="store" id="stDiv_-{storeId}-" dtype="divTmp">
      <a href="${st.domain}/store/-{storeId}-">
       <div class="title f_clear">
       	<h1>-{name}-</h1>
       	<div class="f_clear">
        <h2>地址：-{address}-</h2><span>-{km}-</span>
        </div>
       </div>
      </a>
      <div class="nr">
        <ul class="f_clear" id="stUl_-{storeId}-">
        </ul>
      </div>
    </div>
</div>
<div id="sgItemTmp" style="display:none;">
	<li id="sgLi_-{storeGoodsId}-"><a href="${st.domain}/storeGoods/detail/-{storeGoodsId}-"><img src="${st.resDomain}/images/loading.gif" data="-{pic}-" dtype="tmp"></a><span>￥-{price}-</span></li>
</div>
<script src="${st.resDomain}/scripts/jquery-1.9.1.min.js"></script>
<script src="${st.resDomain}/scripts/com.js"></script>
<script type="text/javascript">
	var loadsgListPath = g_domain + "/storeGoods/list/json";
	var loadStorePath = null;
	var isLoading = false;
	var pageInfo = {
		nowPage: 0, // 这里第一页从0开始
		pageSize:10
	};
	var $storeList = $("#storeList");
	var $loadTip = $("#loadTip");
	var storesItemTmp = $("#storesItemTmp").html();
	var searchWord = $("#searchWord").html();
	var latLng = null;
	var geoStartTime;
	
	setLoadStorePath();
	
	loadStoreList();
	
	geoLocation({
		after: function(lat, lng) {
		
			latLng = {
				lat: lat,
				lng: lng
			}
			
			// 请求时间超10秒才会自动刷新列表
			if (new Date().getTime() - geoStartTime > 10000) {
				showMsg("位置信息获取成功", 'pass');
				$storeList.html("");
				pageInfo.nowPage = 0;
				loadStoreList();
			}
			
		},
		before: function() {
			geoStartTime = new Date().getTime();
			showMsg("正在获取您的位置信息...", 'pass');
		},
		error: function(msg) {
			showMsg(msg, 'error');
			loadStoreList();
		}
	});
	
	// 排序
	$("[id^='rank_']").click(function() {
		$(".tab a").removeClass("selected");
		$(this).addClass("selected");
		var type = $(this).attr("id").split("_")[1];
		
		setLoadStorePath(type);
		
		$storeList.html("");
		pageInfo.nowPage = 0;
		loadStoreList();
		
	});
	
	function setLoadStorePath(type) {
		loadStorePath = g_behaviorDomain + "/store/near/json?d=10000";
		if (type == "recom") {
			loadStorePath += "&sort=IsRecommand,desc&sort=location,desc";
		} else if (type == "hot") {
			loadStorePath += "&sort=hot,desc";
		}
	}
	
	function loadStoreList() {
		isLoading = true;
		$loadTip.show().html("正在加载...");
		
		var params = {
			w: searchWord, 
			x: latLng ? latLng.lng : 108.3,
			y: latLng ? latLng.lat : 22.8, 
			page: pageInfo.nowPage, 
			size: pageInfo.pageSize
		};
		
		$.getJSON(loadStorePath, params, function(data) {
			isLoading = false;
			$loadTip.html("点击加载更多");
			if (data.status !== 0) {
				showMsg("加载失败!", 'error');
				return; 
			}
			var list = data.result.content;
			if (!list) {
				$loadTip.html("没有相关店铺");
				return;
			}
			for (var i = 0; i < list.length; i++) {
				var store = list[i];
				
				var distance = "好评率<strong>98%</strong>";
				if (latLng) {
					distance = (getDistance(latLng.lat, latLng.lng, store.lat, store.lng)/1000).toFixed(2) + "km";
				}
				
				var itemTmp = storesItemTmp;
				itemTmp = itemTmp
				.replace(/\-\{storeId\}\-/g, store.storeId)
				.replace(/\-\{name\}\-/g, store.name)
				.replace(/\-\{km\}\-/g, distance)
				.replace(/\-\{address\}\-/g, store.address);
				$storeList.append(itemTmp);
			}
			pageInfo.nowPage = data.result.number;
			pageInfo.totalPage = data.result.totalPages;
			if ((pageInfo.nowPage + 1) === pageInfo.totalPage) {
				$loadTip.hide();
			}
			// 触发滚动事件,使视窗中的店铺加载店铺商品
			$(document).trigger('loadsg');
		});
	}
	
	// 事件：加载更多
	$loadTip.click(function() {
		if (!isLoading) {
			pageInfo.nowPage = pageInfo.nowPage + 1;
			isLoading?void(0):loadStoreList();
		}
	});
	
	// 店铺商品懒加载
	$(function() {
		var isDoing = false;
		$(document).on("loadsg", function() {
			if (isDoing) {
				return;
			}
			setTimeout(function() {
				isDoing = true;
				var wHeight = $(window).height();
				var wScrollTop = $(window).scrollTop();
				$("[id^='stDiv_'][dtype]").each(function() {
					var $this = $(this);
					var elHeight = $this.height();
					var elTop = $this.offset().top;
					var storeId = ($this.attr("id").split("_"))[1];
					if ((wScrollTop >= elTop && wScrollTop < (elTop + elHeight)) || (wScrollTop < elTop && (wScrollTop + wHeight) >= elTop) ) {
						$this.removeAttr("dtype");
						$.getJSON(loadsgListPath, {"store.storeId": storeId, pageSize: 3, 'sorts[0].field': "sort", 'sorts[0].idDesc': true}, function(data) {
							if (data.status !== 0) {
								showMsg("加载失败!", 'error');
								return; 
							}
							var sgList = data.result.list;
							var stUl = $("#stUl_" + storeId);
							var sgItemTmp = $("#sgItemTmp").html();
							if (!sgList) {
								stUl.append("<li style='font-size:0.7em;'>店家还没有上架商品哦</li>");
								return;
							}
							for (var i = 0; i < sgList.length; i++) {
								var sg = sgList[i];
								var itemTmp = sgItemTmp;
								itemTmp = itemTmp
								.replace(/\-\{storeGoodsId\}\-/g, sg.storeGoodsId)
								.replace(/\-\{pic\}\-/g, sg.pic)
								.replace(/\-\{price\}\-/g, sg.price)
								.replace('dtype="tmp"', "");
								stUl.append(itemTmp);
							}
							// 触发滚动事件,使视窗中的图片显示
							$(document).trigger('showimg');
						}); 
						
					}
				});
				isDoing = false;
				
			});
		});
		$(window).scroll(function() {
			$(document).trigger('loadsg');
		});
		$(document).trigger('loadsg');
	});
</script>
</body>
</html>
